<template>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <!-- <header class="header">
        <h1 class="title">ScrollSmoother</h1>
        <button class="button" @click="toC">Jump to C</button>
      </header>
      <div class="box box-c" data-speed="1.5">c</div>
      <div class="line"></div> -->
      <div
        class="boxbig"
        style="height: 16vh; width: 100%; background: #ccc"
      ></div>
      <div class="pin-section">
        <div class="pin-content pin-content-1">
          <div class="pin-box">
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=11" />
            </div>
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=12" />
            </div>
          </div>
          <div class="pin-box">
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=13" />
            </div>
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=14" />
            </div>
          </div>
          <div class="pin-box">
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=15" />
            </div>
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=16" />
            </div>
          </div>
        </div>

        <div class="pin-content pin-content-2">
          <div class="pin-box">
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=16" />
            </div>
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=15" />
            </div>
          </div>
          <div class="pin-box">
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=14" />
            </div>
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=13" />
            </div>
          </div>
          <div class="pin-box">
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=11" />
            </div>
            <div class="pin-image">
              <img src="https://picsum.photos/800?random=11" />
            </div>
          </div>
        </div>
      </div>
      <ScrollAni></ScrollAni>
    </div>
  </div>
</template>

<script setup>
import ScrollAni from "./scrollAni.vue";
import { gsap } from "gsap-trial";

/* The following plugins are Club GSAP perks */
import { ScrollSmoother } from "gsap-trial/ScrollSmoother";
import { ScrollTrigger } from "gsap-trial/ScrollTrigger";
import { DrawSVGPlugin } from "gsap-trial/DrawSVGPlugin";

gsap.registerPlugin(ScrollSmoother, ScrollTrigger, DrawSVGPlugin);

import { onMounted, ref, reactive, computed, watch } from "vue";
let smoother = "";
const init = () => {
  ScrollTrigger.normalizeScroll(true);

  // create the smooth scroller FIRST!
  smoother = ScrollSmoother.create({
    smooth: 2,
    effects: true,
    normalizeScroll: true,
  });

  // pin box-c when it reaches the center of the viewport, for 300px
  ScrollTrigger.create({
    trigger: ".box-c",
    pin: true,
    start: "center center",
    end: "+=300",
    markers: true,
  });

  // pin-sec
  let pinSection = document.querySelector(".pin-section");
  let pinContent1 = document.querySelector(".pin-content-1");
  let pinContent2 = document.querySelector(".pin-content-2");

  let pinTl = gsap.timeline({
    scrollTrigger: {
      pin: true,
      trigger: pinSection,
      scrub: true,
      start: "center center",
      end: () => `$+=${pinContent1.offsetWidth}`,
      invalidateOnRefresh: true,
    },
  });

  pinTl.fromTo(
    ".pin-content-1",
    {
      x: document.body.clientWidth * 0.9,
    },
    {
      x: () => -pinContent1.offsetWidth,
      ease: "none",
    },
    0
  );

  pinTl.fromTo(
    ".pin-content-2",
    {
      x: () => -pinContent2.offsetWidth + document.body.clientWidth * 0.1,
    },
    {
      x: () => document.body.clientWidth,
      ease: "none",
    },
    0
  );

  // pin-sec end
};
onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.pin-section {
  height: 50vh;
  overflow: hidden;
  display: grid;
  grid-row-gap: 1rem;
  grid-template-rows: 1fr 1fr;
}

.pin-content {
  width: 300%;
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  will-change: transform;
}

.pin-box {
  height: 100%;
  width: 100%;
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
.pin-image {
  position: relative;
  border: 1px springgreen solid;
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    visibility: hidden;
  }
}

// ping-sec end
</style>
